<template>
  <div class="wrap" v-show="toShow" >
      <div class="dropdown" @mouseover="$parent.toShow = true"  @mouseleave="$parent.toShow = false;$parent.showIndex = 0">
          <ul v-if="showIndex === 1">
            <li class="dropdownBox" v-for="(item,index) in list1" :key="index" @click="toCateDetails(item)">
              <img class="imgbox" :src="item.pic" alt="">
              <span>
                {{item.cate_name}}
              </span>
            </li>
          </ul>
					<ul v-if="showIndex === 2">
					  <li class="dropdownBox" v-for="(item,index) in list2" :key="index" @click="toCateDetails(item)">
					    <img class="imgbox" :src="item.pic" alt="">
					    <span>
					      {{item.cate_name}}
					    </span>
					  </li>
					</ul>
      </div>
  </div>
</template>

<script>
	import { getProductsCategory} from '@/request/api'

export default {
  name: 'Dropdown',
  props: {
    toShow: Boolean,
		showIndex:Number
  },
  data() {
    return {
			list1: [],
			list2: [],
			page:1
    }
  },
	created(){
		this.getList();
	},
  methods: {
		getList(){
			let data1={
				is_entity:'1',
				page:1,
				limit:15,
				pid:0,
				num:15
			};
			let data2={
				is_entity:'0',
				page:1,
				limit:15,
				pid:0,
				num:15
			};
			getProductsCategory(data1).then(res => {
				this.list1 = res.data.data;
			})
			getProductsCategory(data2).then(res => {
				this.list2 = res.data.data;
			})
		},
    toCateDetails({ title }) {
      this.$router.push({
        name: 'CateClassify',
        params: { name: title }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    height: 0;
    z-index: 9999;

    .dropdown {
      display: inline-block;
      width: 1100px;
      background-color: #ffffff;
      padding: 5px 10px;
    }

    .dropdownBox {
      float: left;
      width: 212px;
      height: 90px;
      margin: 5px 2px;
      text-align: center;
      background-color: #F3F4F7;
      border: 1px #ffffff solid;
      box-sizing: border-box;
      cursor:pointer;

      .imgbox {
        width: 110px;
        height: 100%;
        float: left;
      }

      span {
        text-align: center;
        float: right;
        color: #7e7e7f;
        font-size: 14px;
        font-weight: bold;
        width: 100px;
        height: 90px;
        line-height: 90px;
      }
    }

    .dropdownBox:hover {
      border: 1px solid #E38B2E;
      box-sizing: border-box;
    }

    .dropdownBox:hover span {
      color: #E38B2E;
    }

  }
</style>
